Виджеты. Декомпозиция. Иконка приложения

➡️ Ссылка на репозиторий с кодом этого урока

Декомпозиция виджета

Когда внутри одного виджета много кода, его становится сложно читать и понимать и это плохо для производительности приложенеия.
В таких случаях становится необходимым рефакторинг кода.

Нужно разделить большой виджет на несколько мелких виджетов.
Какие преимущества это дает?

1. Код становится более читабельным и стетически привлекательным
2. Улучшается производительность приложения

В документации Flutter также рекомендуется разбивать виджеты на максимально простые компоненты для оптимизации и удобства работы.

Не забываем пользоваться сниппетами для быстрого написания кода. Например, чтобы быстро создать шаблонный код для StatelessWidget нужно написать сниппет statelessW нажать tab или enter

• Добавим ещё один виджет и назовём его HomeWidget. Перенесём в него все виджеты начиная со Center

• Внутрь MaterialApp() нужно теперь передать HomeWidget

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: "Hello Flutter App",
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Hello Flutter App"),
        ),
        body: HomeWidget(), // 👈 Добавляем наш виджет для главного экрана
      ),
    );
  }
}

// 👉 Отдельный виджет для главного/домашнего экрана
class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset("assets/images/roll.png", width: 250),
          Text("Вкусные Роллы", style: TextStyle(fontSize: 20)),
          SizedBox(height: 20),
          ElevatedButton(onPressed: () {}, child: const Text("Купить")),
        ],
      ),
    );
  }
}
                  

Нажимаем на кнопку Restart и проверяем, что всё по прежнему работает

Как в VS Code включить линии для выделения блоков дерева виджетов?

В настройках settings (ctrl + ,) найдите эти строки и поставьте значения true

"dart.previewFlutterUiGuides": true
"dart.previewFlutterUiGuidesCustomTracking": true